<template>
    <el-container class="main-container"> 
        <el-form :model="query">
            <el-form-item label="姓名:" label-width="80px">
                <el-input v-model="query.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table stripe border 
                :data="records" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
        </el-table>
        <el-container class="main-footer-container">
            <el-button-group>
				<el-button @click="handleInsert">新增</el-button>
				<el-button @click="handleUpdate" :disabled="common.updateButtonDisabled">修改</el-button>
				<el-button @click="handleRemove" :disabled="common.deleteButtonDisabled">删除</el-button>
			</el-button-group>
            <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 15, 50, 100]" :current-page="page.number" :page-size="page.size" :total="page.total"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange">
            </el-pagination>
        </el-container>
        <el-dialog :title="common.editDialog.title" :visible.sync="common.editDialog.visible" :close-on-click-modal="false">
            <el-form :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" v-model="form.synopsis" placeholder="请输入简介"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="common.editDialog.visible = false">取消</el-button>
                <el-button @click="handleEdit">确定</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
import { IRequest, IMessageBoxRequest } from '@/utils/request'
import { IMessage } from '@/utils/notice'

export default {
    data(){
        return {
            form: {
                id: '',
                name: '',
                synopsis: ''
            },
            records: [

            ],
            query: {
                name: ''
            },
            selection: {
                ids: []
            },
            page: {
                number: 1,
                size: 5,
                total: 0
            },
            common: {
                updateButtonDisabled: true,
                deleteButtonDisabled: true,
                editDialog: {
                    method: null,
                    visible: false,
                    title: '' 
                }
                
            }
        }
    },
    mounted: function() {
        this.getList()
    },
    methods: {
        getList(){
            IRequest({
                method: 'post',
                url: '/authors/',
                params: { page_number: this.page.number, page_size: this.page.size },
                data: this.query
            }).then(response => {
                IMessage({message: response.message, type: 'success'})
                this.records = response.data.records
                this.page.total = response.data.total
            })
        },
        handleQuery(){
            this.getList()
        },
        handleCurrentChange(val){
            this.page.number = val
            this.getList()
        },
        handleSizeChange(val){
            this.page.size = val
            this.getList()
        },
        handleSelectionChange(val){
            this.selection.ids = []
            val.forEach( obj => this.selection.ids.push(obj.id))
            this.common.updateButtonDisabled = this.selection.ids.length !== 1
            this.common.deleteButtonDisabled = this.selection.ids.length < 1
        },
        handleInsert(){
            this.form = {}
            this.common.editDialog.method = 'post'
            this.common.editDialog.title = '新增'
            this.common.editDialog.visible = true
        },
        handleUpdate(){
            this.common.editDialog.method = 'put'
            this.common.editDialog.title = '修改'
            this.common.editDialog.visible = true
            IRequest({
                url: `/author/${this.selection.ids[0]}`
            }).then(response => {
                this.form = response.data
                IMessage({message: response.message, type: 'success'})
            })
        },
        handleEdit(){
            if(!this.common.editDialog.method) return
            const method = this.common.editDialog.method
            IRequest({
                method: method,
                url: '/author/',
                data: this.form
            }).then(response => {
                IMessage({message: response.message, type: 'success'})
                this.getList()
                this.common.editDialog.visible = false
            })
        },
        handleRemove(){
            IMessageBoxRequest({
                message: '确定删除?',
                type: 'warn',
                method: 'delete',
                url: '/authors/',
                params: { ids: this.selection.ids }
            }).then(response => {
                this.page.number = 1
                IMessage({message: response.message, type: 'success'})
                this.getList()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.main-container{
    flex-direction: column;
    .main-footer-container{
        justify-content: space-between;
    }
}
</style>